<template>
  <div class="business-container">
    <el-row class="header">
      <el-card>
        <el-form label-width="auto" :model="form">
          <el-row type="flex" justify="space-between">
            <el-form-item label="运单编号">
              <el-col :span="8">
                <el-input
                  v-model="form"
                  class="inputStyle"
                  placeholder="请输入运单编号"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-col :span="8">
                <el-input
                  v-model="form"
                  class="inputStyle"
                  placeholder="请输入订单编号"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="调度状态">
              <el-col :span="8">
                <el-select
                  v-model="form"
                  placeholder="请选择"
                  class="inputStyle"
                >
                  <el-option
                    v-for="item in 10"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="起始地机构">
              <el-col :span="8">
                <el-select
                  v-model="form"
                  placeholder="请选择起始地机构"
                  class="inputStyle"
                >
                  <el-option
                    v-for="item in 10"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="目的地机构">
              <el-col :span="8">
                <el-select
                  v-model="form"
                  placeholder="请选择目的地机构"
                  class="inputStyle"
                >
                  <el-option
                    v-for="item in 10"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="当前所在地机构">
              <el-col :span="8">
                <el-select
                  v-model="form"
                  placeholder="请选择当前所在地机构"
                  class="inputStyle"
                >
                  <el-option
                    v-for="item in 10"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin: 0">
              <el-button
                class="buttonStyle"
                type="primary"
                size="small"
              >查询</el-button>
              <el-button class="buttonStyle" size="small">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row class="nav">
      <el-card>
        <el-row type="flex" justify="start">
          <el-col class="nav-module active">全部</el-col>
          <el-col class="nav-module">新建</el-col>
          <el-col class="nav-module">已装车</el-col>
          <el-col class="nav-module">运输中</el-col>
          <el-col class="nav-module">到达终端网点</el-col>
          <el-col class="nav-module">拒收</el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row class="footer">
      <el-card class="footer-card">
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="50" />
            <el-table-column prop="name" label="运单编号" width="150" />
            <el-table-column prop="name" label="订单编号" width="150" />
            <el-table-column prop="name" label="运单状态" width="150" />
            <el-table-column prop="name" label="调度状态" width="150" />
            <el-table-column prop="name" label="起始营业部" width="150" />
            <el-table-column prop="name" label="重点营业部" width="150" />
            <el-table-column prop="name" label="当前所在机构" width="150" />
            <el-table-column prop="name" label="下一个机构" width="150" />
            <el-table-column prop="name" label="货品总体积（立方米）" width="150" />
            <el-table-column prop="name" label="货品总重量（千克）" width="150" />
            <el-table-column prop="name" label="创建时间" width="150" />
            <el-table-column prop="name" label="更新时间" width="150" />
            <el-table-column prop="address" fixed="right" label="操作">
              <template>
                <el-button type="text" size="small">查看详情</el-button>
                <el-button type="text" size="small">停用</el-button>
                <el-button type="text" size="small">匹配司机</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="margin-top: 10px; height: 40px"
        >
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang="scss">
.business-container {
  padding: 0 20px;
  .header,
  .nav,
  .footer {
    margin-bottom: 20px;
    font-size: 13px;
  }
  .header {
    font-size: 13px;
    margin-bottom: 20px;
    .el-form-item {
      padding: 0 20px;
      .inputStyle {
        width: 250px;
      }
      .buttonStyle {
        width: 80px;
        height: 30px;

        &.buttonStyle:first-child {
          background-color: #189450;
          border-color: #189450;
          margin-right: 10px;

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .header-footer {
      margin: 0;
    }
  }
  .nav {
    .active {
      color: #67c23a;
      background: #f0f9eb;
      border: 1px solid #c2e7b0;
      border-color: #c2e7b0;
    }
    ::v-deep .el-card__body {
      padding: 0 !important;
      .nav-module {
        cursor: pointer;
        width: 120px;
        height: 48px;
        text-align: center;
        line-height: 48px;
      }
    }
  }
  .footer {
    .footer-card {
      padding: 10px;
      padding-bottom: 0;
    }
  }
}
::v-deep .el-form-item__label {
  font-size: 13px;
}

::v-deep .el-table thead tr th {
  font-size: 13px;
  font-weight: bold;
  background: #f8faff !important;
  border: none;
}

::v-deep .el-input__inner {
  height: 35px;
  font-size: 13px;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  height: 28px;
  font-size: 13px;
}
</style>
